<template>
	<view>
		<view class="main">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#1D5CE7"></uni-segmented-control>
			<view class="item">
				<view class="itemLine1">
					个人费用趋势报表
				</view>
				<view class="itemLine2 ">
					<view class="qiun-charts">
						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
						 :style="{'width':cWidth+'px','height':cHeight+'px'}" />
					</view>
				</view>
				<view class="itemLine3">
					<navigator url="./checkData">查看数据</navigator>
				</view>
			</view>

		</view>
		<view class="footer">
			<uni-table type="false" style="width: 100%;border">
				<uni-tr class="tableHeader">
					<uni-th align="center" width="5rpx">报销月份</uni-th>
					<uni-th align="center" width="5rpx">审批中+支付中</uni-th>
					<uni-th align="center" width="5rpx">已完成</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td align="center">2020-12</uni-td>
					<uni-td align="center">703.00</uni-td>
					<uni-td align="center">0.00</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import zNavigatorBar from '@/pages/common/navigation';
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	var canvasRing1 = null;
	var canvasRing2 = null;

	export default {
		onReady() {
			this.show()
		},
		onShow() {
			this.show()
		},
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '个人报表'
				}, {
					name: '企业报表'
				}],
				tabCur: 0,
				items: ['本月', '本季', '本年', '去年', '自定义'],
				current: 0,
				columnData: {
					"categories": ["20-12"],
					"series": [{
						"name": "审批中+支付中",
						"data": [703],
						"color": "#77D0A4"
					}, {
						"name": "已完成",
						"data": [0],
						"color": "#7EC1F2"

					}]
				},
				columnDataSeason: {
					"categories": ["20-10", "20-11", "20-12"],
					"series": [{
						"name": "审批中+支付中",
						"data": [0, 0, 703],
						"color": "#77D0A4"
					}, {
						"name": "已完成",
						"data": [0, 0, 0],
						"color": "#7EC1F2"

					}]
				},
				ringData: {
					"series": [{
						"data": 0,
						"name": '金额',
						"color": 'gray'
					}]
				},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: ''
			}
		},
		components: {
			WucTab
		},
		methods: {
			show() {
				_self = this;
				this.cWidth = uni.upx2px(600);
				this.cHeight = uni.upx2px(400);
				this.showColumn("canvasColumn", this.columnData);
				this.showRing("canvasRing1", this.ringData, canvasRing1);
				this.showRing("canvasRing2", this.ringData, canvasRing2);
			},
			tabChange(index) {
				this.TabCur = index;
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.TabCur3 = current;
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (this.current <= 1) {
					this.show()
				}
			},
			showColumn(canvasId, chartData) {

				if (this.current == 1) {
					chartData = this.columnDataSeason;
				}
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 0, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							position: 'right',
							axisLine: false,
							format: (val) => {
								return val.toFixed(0)
							},
						}]
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.1 / chartData.categories.length
						}
					}
				});
			},
			showRing(canvasId, chartData, canvaRing) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					title: {
						name: '¥0.00',
						color: 'black',
						fontSize: 20,
					},
					subtitle: {
						name: '费用总额',
						fontSize: 15,
						color: '#999'
					},
					extra: {
						pie: {
							offsetAngle: 0,
							ringWidth: 10 * _self.pixelRatio,
							labelWidth: 15
						}
					},
				});
			},
		},


		components: {
			zNavigatorBar,
			WucTab
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.tab {
		width: 100%;
	}

	.main {
		padding: 40rpx;

	}

	.content {
		margin-top: 40rpx;
		background-color: white;
	}

	.qiun-charts {
		width: 600upx;
		height: 400upx;
		background-color: #FFFFFF;
		margin: 0 auto;
	}

	.charts {
		width: 600upx;
		height: 400upx;
		background-color: #FFFFFF;
	}

	.item {
		margin-top: 30rpx;
		border-radius: 30rpx;
		background-color: white;
	}

	.itemLine1 {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.itemLine2 {
		margin-top: 30rpx;
	}

	.itemLine3 {
		margin-top: 30rpx;
		text-align: center;
		color: $themeColor;
		font-size: 35rpx;
		border-top: 0.5rpx solid $uni-text-color-grey;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.footer{
		margin-top: 20rpx;
		width: 100%;
	}
	.tableHeader{
		background-color:#F7F7F7 ;
	}
</style>
